<template>
  <div id="body">
    <user-head></user-head>
    <div class="seach" style="text-align: center;">
      <el-autocomplete
        v-model="seachData"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入书名"
        @select="handleSelect"
      ></el-autocomplete>
      <el-button style="background:red;color:white;" @click="search">搜索</el-button>
      <el-button style="color:red;" @click="showCart">我的购物车</el-button>
    </div>

    <hr class="hrStype" />

    <div id="searchListDiv">
      <search-list :data="pressesData"></search-list>
      <search-list :data="typesData"></search-list>
    </div>
    <el-divider></el-divider>

    <pic-table ref="table" :formData="formData" style="heigh : 100px"></pic-table>
  </div>
</template>
<script>
import PicTable from "./PicTable.vue";
import SearchList from "./SearchList.vue";
import Head from "./Head.vue";
export default {
  components: {
    "pic-table": PicTable,
    "search-list": SearchList,
    "user-head": Head,
  },
  data() {
    return {
      formData: { a: "a" },
      typesData: {
        title: "类别",
        list: [],
        prop: "typeName",
      },
      pressesData: {
        title: "出版社",
        list: [],
        prop: "pressName",
      },
      // 搜索条件
      seachData: "",
    };
  },
  methods: {
    showCart() {
      const { href } = this.$router.resolve({
        name: "购物车",
        query: {},
      });
      window.open(href, "_blank");
    },
    handleSelect() {},
    // 点击搜索按钮时操作
    search() {
      this.$refs.table.getTable({bookName:this.seachData});
    },
    searchList(pro, val) {
      var value;
      switch (pro) {
        case "typeName": {
          value = { typeId: val };
          break;
        }
        case "pressName": {
          value = { pressId: val };
          break;
        }
      }
      this.$refs.table.getTable(value);
    },
    /**
     * 获取书籍书名
     * @param queryString 输入文字
     * @param cd 返回建议结果
     */
    querySearchAsync(queryString, cb) {
      this.COMMON.httpPost(
        this,
        "bookOperation/selectList",
        { bookName: queryString },
        (result) => {
          if (result.result === "SUCCESS") {
            var values = new Array();
            result.list.forEach((element) => {
              values.push({ value: element.bookName, id: element.id });
            });
            cb(values);
          }
        },
        (result) => {}
      );
    },
    getPresses() {
      this.COMMON.httpPost(
        this,
        "pressOperation/selectList",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            this.pressesData.list = result.list;
          }
        },
        (result) => {}
      );
    },
    getTypes() {
      this.COMMON.httpPost(
        this,
        "bookTypeOperation/selectList",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            this.typesData.list = result.list;
          }
        },
        (result) => {}
      );
    },
  },
  activated: function () {},
  mounted: function () {
    this.getPresses();
    this.getTypes();
  },
  created: function () {},
};
</script>
<style>
body {
  margin: 0px;
  padding: 0;
  overflow: auto;
}
#body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.seach {
  margin-top: 20px;
}
#searchListDiv {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 50px;
}
.hrStype {
  border: none;
  color: #f00;
  border-width: 5px;
  background-color: #f00;
  color-scheme: red;
  height: 5px;
}
</style>